<template>
	<div class="shopcar-container">
		<!-- 列表区域 -->
		<div class="goodsinfo">
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<input type="checkbox" >
						<img src="../../images/phone.jpg"  alt="">
						<div class="info">
							<h5>华为Mate9 全网通 128G</h5>
							<p>
								<span class="price">￥2199</span>
								<numbox style="height:25px;"></numbox>
								<a href="#" @click.prevent="remove(9527)">删除</a>
							</p>
						</div>
					</div>
				</div>
			</div>
		
		<!-- 结算区域 -->
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner jiesuan">
					
					<div class="left">
						<p>总计(不含运费)</p>
						<p>已勾选<span class='red'> 0 </span>件， 总价<span class='red'> ￥0 </span></p>
					</div>
					<mt-button type="danger">去结算</mt-button>
				</div>
			</div>
		</div>
	</div>


	</div>
</template>



<script>
	import numbox from '../subcomponent/shopcar_numbox.vue';

	export default{
		components:{
			numbox
		},
		methods:{
			// 点击删除，把商品从store中根据id删除的同时，也把组件中的goodslist对应的商品根据index删除，这样可以重新渲染列表
			remove( id ){

				this.$store.commit('removeFromCar', id);

			}
			
		}
	}
</script>




<style lang="scss" scoped>
	.shopcar-container{
		background-color: #fff;
		overflow:		  hidden;
		.goodsinfo{

			.mui-card-content-inner{
				display:flex;
				item-align:center;
			}

			h5{
				font-size:13px;
				color:#369;
				text-align:center;
			}


			img{
				width:60px;
				height:60px;
			}
			input{
				margin-top:10px;
				width:30px;
				height:30px;
			}
			.info{
				.price{
					color:red;
					font-weight:bold;
				}
				margin-left:5px;
			}
		}
	}

	.jiesuan{
		display:flex;
		justify-content:space-between;
		align-items:center;
		.red{
			color:red;
			font-weight:bold;
			font-size:16px;
		}
	}
</style>